<template>
  <div>
    <!--1视图-->
    <el-form :inline="true" :model="shops" class="demo-form-inline">
      <el-form-item label="商品品牌">
        <el-select v-model="shops.typeId" placeholder="商品品牌" clearable>
          <el-option v-for="t in types" :label="t.name"  v-bind:key="t.id" :value="t.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="pic"
          label="图片"
          width="120">
        <template v-slot="s">
          <el-image :src="s.row.pic"></el-image>666
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价钱"
          width="120">
      </el-table-column>
      <el-table-column
          prop="hh"
          label="货号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="px"
          label="排序"
          width="150">
      </el-table-column>
      <el-table-column
          prop="typeName"
          label="商品品牌"
          width="180">
      </el-table-column>
      <el-table-column
          prop="num"
          label="销量"
          width="120">
      </el-table-column>
      <el-table-column
          prop="flag"
          label="状态"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="添加"  :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品货号" :label-width="formLabelWidth" prop="hh">
          <el-input v-model="form.hh" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌" :label-width="formLabelWidth" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择" clearable>
            <el-option v-for="t in types" :label="t.name"  v-bind:key="t.id" :value="t.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:9999/shop/upFile/"
              :show-file-list="false"
              :on-success="success"
              >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
        @current-change="goPage"
        :page-size="3"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

  </div>

</template>

<script>
export default {
  name: "ShopView",
  data() {
    return {
      //2属性定义
      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        hh: [
          { required: true, message: '请输入商品货号', trigger: 'blur' },
        ],
        typeId: [
          { required: true, message: '请选择商品品牌', trigger: 'change' },
        ],
      },
      imageUrl:'',
      form:{},
      formLabelWidth:'120px',
      dialogFormVisible:false,
      types:[],
      tableData:[],
      shops:{},
      pageNum:1,
      total:0,
    }
  }, methods: {
    //3自定义方法
    add(formName){

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("shop/add",this.form).then(res=>{
            if(res.data.code==200){
              this.$message.success(res.data.msg);
              this.dialogFormVisible=false;
              this.list();
            }else{
              this.$message.error(res.data.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    success(res){
       this.imageUrl='http://localhost:9999/pic/'+res.data;
       this.form.pic='http://localhost:9999/pic/'+res.data;
    },
    openAdd(){
      this.form={};
      this.dialogFormVisible=true;
      this.imageUrl='';
    },
    getTypes(){
      this.axios.post("type/list").then(res=>{
        this.types=res.data.data;
      })
    },
    goPage(page){
      this.pageNum=page;
      this.list();
    },
    list(){
      this.axios.post("shop/list?pageNum="+this.pageNum,this.shops).then(res=>{
          this.tableData=res.data.data.list;
          this.total=res.data.data.total;
      })
    }
  }, created() {
    //4.钩子函数
    this.list();
    this.getTypes();
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>